<template>
  <div>
    <!-- 顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 后台管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/admin/mall' }">商城管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 操作区域 -->
    <div style="margin: 0 0 20px 0;">
      <el-divider content-position="left">操作区域</el-divider>
      <el-button type="primary" size="small" @click="gotoAddNew()">发布商品</el-button>
    </div>

    <!-- 数据表格 -->
    <el-divider content-position="left">数据表格</el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="封面图片" width="100" align="center">
        <template slot-scope="scope">
          <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.coverUrl"
              fit="fit"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="类别" width="80" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="barCode" label="商品条码" width="150" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="title" label="商品标题" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="salePrice" label="售价" width="80" align="center"></el-table-column>
      <el-table-column prop="salesCount" label="销量" width="80" align="center"></el-table-column>
      <el-table-column label="好评/评论" width="100" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.positiveCommentCount }} / {{ scope.row.commentCount }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序序号" width="80" align="center"></el-table-column>
      <el-table-column label="审核状态" width="80" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="如需发布，请点击【审核】按钮进行审核，任何修改都会导致发布状态改为【未审核】" placement="top">
            <span v-if="scope.row.checkState == 1" style="color: #67c23a">{{ checkStateText[scope.row.checkState] }}</span>
            <span v-else-if="scope.row.checkState == 2" style="color: #F56C6C">{{ checkStateText[scope.row.checkState] }}</span>
            <span v-else style="color: #aaa">{{ checkStateText[scope.row.checkState] }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="推荐" width="60" align="center">
        <template slot-scope="scope">
          <el-switch
              @change="toggleRecommend(scope.row)"
              v-model="scope.row.isRecommend"
              :disabled="scope.row.checkState != 1 || scope.row.isPutOn != 1"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#cccccc">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="上架" width="60" align="center">
        <template slot-scope="scope">
          <el-switch
              @change="togglePutOn(scope.row)"
              v-model="scope.row.isPutOn"
              :disabled="scope.row.checkState != 1"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#cccccc">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button class="op_button" :disabled="scope.row.checkState != 0" @click="openCheckDialog(scope.row)">审核</el-button>
          <el-button class="op_button" @click="openShowInfoDialog(scope.row)">查看</el-button>
          <el-button class="op_button" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button class="op_button danger" @click="openDeleteConfirm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div style="margin: 10px 0; text-align: right;">
      <el-pagination
          @current-change="changePage"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <!-- 显示审核商品的对话框 -->
    <el-dialog :title="'审核 ' + checkForm.title" :visible.sync="checkFormDialogVisible">
      <el-form :model="checkForm" label-width="120px">
        <el-form-item label="审核状态">
          <el-radio-group v-model="checkForm.checkState">
            <el-radio :label="2">拒绝</el-radio>
            <el-radio :label="1">通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="checkForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkFormDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCheck()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 显示商品详情的对话框 -->
    <el-dialog class="goods-info" :title="goods.title" :visible.sync="infoDialogVisible">
      <el-descriptions :column="1" border label-class-name="spu-info-label">
        <el-descriptions-item label="数据ID">
          {{ goods.id }}
          <el-tooltip class="item" effect="dark" content="此数据不会显示在普通用户界面" placement="right">
            <sup><i class="el-icon-info"></i></sup>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="类别">{{ goods.categoryName }}</el-descriptions-item>
        <el-descriptions-item label="商品条码">{{ goods.barCode }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{ goods.title }}</el-descriptions-item>
        <el-descriptions-item label="简介">{{ goods.brief }}</el-descriptions-item>
        <el-descriptions-item label="关键词">{{ goods.keywords }}</el-descriptions-item>
        <el-descriptions-item label="售价">{{ goods.salePrice }} 元</el-descriptions-item>
        <el-descriptions-item label="销量">{{ goods.salesCount }}</el-descriptions-item>
        <el-descriptions-item label="排序序号">{{ goods.sort }}</el-descriptions-item>
        <el-descriptions-item label="是否推荐">{{ goods.isRecommend == 0 ? '否' : '是' }}</el-descriptions-item>
        <el-descriptions-item label="是否上架">{{ goods.isPutOn == 0 ? '否' : '是' }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">{{ checkStateText[goods.checkState] }}</el-descriptions-item>
        <el-descriptions-item label="好评数量">{{ goods.positiveCommentCount }}</el-descriptions-item>
        <el-descriptions-item label="差评数量">{{ goods.negativeCommentCount }}</el-descriptions-item>
        <el-descriptions-item label="评论总量">{{ goods.commentCount }}</el-descriptions-item>
        <el-descriptions-item label="商品图片">
          <el-image class="picture-item"
                    :src="goods.coverUrl"
                    fit="fit"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="商品详情"><span v-html="goods.detail"></span></el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="infoDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 审核状态文本
      checkStateText: ['未审核', '通过', '拒绝'],
      // 表格数据
      tableData: [],
      // 分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: 20,
      total: 0,
      // 商品详情
      goods: {
      },
      // 审核对话框的可见性
      checkFormDialogVisible: false,
      // 审核表单数据
      checkForm: {
        id: 0,
        title: '',
        checkState: 2,
        remarks: ''
      },
      // 显示商品详情的对话框的可见性
      infoDialogVisible: false,
    }
  },
  methods: {
    // 跳转到新增页面
    gotoAddNew() {
      this.$router.push('/admin/mall/goods/add-new');
    },
    // 切换【是否上架】状态
    togglePutOn(goods) {
      let putOnStateText = ['下架', '上架'];
      let url = this.BaseUrl.ADMIN_MALL + '/goods/' + goods.id;
      if (goods.isPutOn == 1) {
        url += '/put-on';
      } else {
        url += '/pull-off';
      }
      console.log('url = ' + url);

      this.TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: putOnStateText[goods.isPutOn] + '成功！',
            type: 'success'
          });
          this.loadGoodsList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadGoodsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 切换【是否推荐】状态
    toggleRecommend(goods) {
      let recommendStateText = ['不推荐', '推荐'];
      let url = this.BaseUrl.ADMIN_MALL + '/goods/' + goods.id;
      if (goods.isRecommend == 1) {
        url += '/set-recommend';
      } else {
        url += '/cancle-recommend';
      }
      console.log('url = ' + url);

      this.TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: recommendStateText[goods.isRecommend] + '成功！',
            type: 'success'
          });
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadGoodsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 打开审核对话框
    openCheckDialog(goods) {
      this.checkForm.id = goods.id;
      this.checkForm.title = goods.title;
      this.checkFormDialogVisible = true;
    },
    // 提交审核
    submitCheck() {
      let checkStateText = ['', '通过', '拒绝'];
      let url = this.BaseUrl.ADMIN_MALL + '/goods/' + this.checkForm.id;
      if (this.checkForm.checkState == 2) {
        url += '/check-state/reject';
      } else {
        url += '/check-state/pass';
      }
      console.log('url = ' + url);

      let data = {
        id: this.checkForm.id,
        remarks: this.checkForm.remarks
      };

      this.TokenAxios.post(url, data).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: checkStateText[this.checkForm.checkState] + '审核成功！',
            type: 'success'
          });
          this.checkFormDialogVisible = false;
          this.checkForm.checkState = 2;
          this.checkForm.remarks = '';
          this.loadGoodsList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.checkFormDialogVisible = false;
              this.loadGoodsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 打开详情对话框
    openShowInfoDialog(goods) {
      let url = this.BaseUrl.ADMIN_MALL + '/goods/' + goods.id;
      console.log('url = ' + url);

      this.TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.goods = jsonResult.data;
          this.infoDialogVisible = true;
        } else {
          this.$alert(jsonResult.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadGoodsList();
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 打开编辑对话框
    openEditDialog(goods) {
      let title = '提示';
      let message = '您正在尝试编辑【' + goods.id + '-' + goods.title + '】数据，抱歉，此功能尚未实现……';
      this.$alert(message, title, {
        confirmButtonText: '确定',
        callback: action => {
        }
      });
    },
    // 打开删除确认框
    openDeleteConfirm(goods) {
      let message = '将永久删除【' + goods.title + '】类别，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(goods);
      }).catch(() => {
      });
    },
    // 执行删除
    handleDelete(goods) {
      let url = this.BaseUrl.ADMIN_MALL + '/goods/' + goods.id + '/delete';
      console.log('url = ' + url);

      this.TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.loadGoodsList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadGoodsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    // 切换分页
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadGoodsList();
    },
    // 加载商品列表
    loadGoodsList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = this.BaseUrl.ADMIN_MALL + '/goods?page=' + page;
      console.log('url = ' + url);

      this.TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    }
  },
  mounted() {
    this.loadGoodsList();
  }
}
</script>

<style>
.op_button {
  width: 50px;
  margin: 5px 6px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 3px;
}

.danger {
  background: #F56C6C;
  color: #fff;
}

.danger:hover {
  background: #f92d2d;
  color: #fff;
}

.goods-info {
}

.goods-info .spu-info-label {
  width: 120px;
}

.goods-info .picture-item {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  margin-bottom: 10px;
  border-radius: 3px;
  float: left;
}
</style>